import React, { useEffect } from 'react';
import { Modal, Form, Row, Col, Input, Button } from 'antd';
import { OperationEnum } from '@/utils/enum';

interface DetailProps {
  code?: string;
  name?: string;
}

interface CreateFormProps {
  modalVisible: boolean;
  detail: DetailProps;
  type?: string;
  onCancel: () => void;
}

const CreateForm: React.FC<CreateFormProps> = (props) => {
  const { modalVisible, onCancel, detail, type } = props;
  const [form] = Form.useForm();

  useEffect(() => {
    if (type === OperationEnum.add) {
      form.resetFields();
    }
    if (type === OperationEnum.edit) {
      form.setFieldsValue({
        code: detail.code,
        name: detail.name,
      });
    }
  }, [type]);

  const onFinish = (values: any) => {
    console.log('values', values);
  };

  return (
    <Modal
    getContainer={false}
      width="60%"
      destroyOnClose
      title="新建规则"
      visible={modalVisible}
      onCancel={() => onCancel()}
      footer={null}
    >
      <Form form={form} onFinish={onFinish}>
        <Row>
          <Col span={12}>
            <Form.Item
              label="车型代码"
              name="code"
              rules={[{ required: true, message: 'Please input your code!' }]}
            >
              <Input />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              label="车型名称"
              name="name"
              rules={[{ required: true, message: 'Please input your name!' }]}
            >
              <Input />
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={24} style={{ textAlign: 'right' }}>
            <Form.Item>
              <Button type="primary" htmlType="submit">
                保存
              </Button>
              <Button onClick={onCancel}>取消</Button>
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </Modal>
  );
};

export default CreateForm;
